<template>
  <view class="login-info">
    <view class="avatar-wrap">
      <u-avatar v-if="!isLogin" size="130" src="/static/images/center/default-avatar.png"></u-avatar>
      <u-avatar v-if="isLogin" size="130" :src="userInfo.icon" @click="setting"></u-avatar>
			<view v-if="!isLogin" class="is-login" @click="toLogin">去登录</view>
      <view v-else class="user-info">
				<text class="nickname"  @click="setting">{{userInfo.nickname}}</text>
        <text class="username">账号：{{userInfo.mobile}}</text>
      </view>
    </view>
    <view class="info-card">
      <view class="item">
        <text class="num">0</text>
        <text class="label">钱包</text>
      </view>
      <view class="item">
        <text class="num">0</text>
        <text class="label">优惠券</text>
      </view>
      <view class="item">
        <text class="num">0</text>
        <text class="label">积分</text>
      </view>
    </view>
  </view>
</template>

<script>
	import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
      }
    },
		computed: {
			...mapGetters({
				isLogin: 'user/isLogin',
				userInfo: 'user/userInfo'
			})
		},
		methods: {
			toLogin () {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			setting () {
				this.$emit('setting')
			}
		}
  }
</script>

<style lang="scss" scoped>
  .login-info {
    height: 420rpx;
    background: linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63));
    .avatar-wrap {
      display: flex;
      padding: 30rpx 46rpx;
			.is-login {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				font-size: 36rpx;
				color: #FFFFFF;
			}
      .user-info {
        padding: 4rpx 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .nickname {
          color: #FFFFFF;
          font-size: 46rpx;
          font-weight: bold;
        }
        .username {
          color: #FFFFFF;
          font-size: 30rpx;
        }
      }
    }
    .info-card  {
      margin: 52rpx auto 0;
      width: 660rpx;
      height: 142rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 46rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .num {
          color: #222222;
          font-size: 32rpx;
          font-weight: bold;
        }
        .label {
          color: #222222;
          font-size: 24rpx;
        }
      }
    }
  }
</style>
